<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>遗产数字化档案管理平台</a-breadcrumb-item>
      <a-breadcrumb-item>档案借阅记录</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row>
      <a-col :span="6">
        档案名称：
        <a-input placeholder="请输入" v-model="query.archiveName" />
      </a-col>
      <a-col :span="6">
        借阅人：
        <a-input placeholder="请输入" v-model="query.operator" />
      </a-col>
      <a-col :span="8">
        借阅时间：
        <a-range-picker
          style="width: 330px"
          v-model="dateRange"
          :placeholder="['开始日期', '结束日期']"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          :show-time="{
            hideDisabledOptions: true,
            defaultValue: [
              moment('00:00:00', 'HH:mm:ss'),
              moment('23:59:59', 'HH:mm:ss'),
            ],
          }"
          format="YYYY-MM-DD HH:mm:ss"
          @change="createTime1"
        />
      </a-col>
      <a-col :span="6">
        借阅原因：
        <a-input placeholder="请输入" v-model="query.borrowReason" />
      </a-col>
      <!-- <a-col :span="6">
        经办人：
        <a-input placeholder="请输入" v-model="query.borrower" />
      </a-col> -->
      <a-col :span="4">
        <a-button
          type="primary"
          @click="getQuery"
          v-hasPermi="['yichan:dajyjl:find']"
        >
          查询 </a-button
        >&emsp;&nbsp;
        <a-button @click="cleanQuery">重置</a-button>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">档案借阅记录列表</a-col>
      <a-col :span="24">
        <a-table
          :columns="columns"
          :data-source="data"
          :rowKey="
            (record, index) => {
              return index; 
            }
          "
          :pagination="false"
        >
          <span slot="action" slot-scope="text, record">
            <a v-if="record.status == 0" @click="handleReturn(record)" type="primary">归还</a>
            <p v-else style="color: #00000060; margin: 0 auto">已归还</p>
          </span>
        </a-table>
        <a-pagination
          style="float: right; margin-top: 10px"
          v-model="query.current"
          show-size-changer
          :total="total"
          :page-size-options="pageSizeOptions"
          :page-size="query.pageSize"
          @change="pageChange"
          @showSizeChange="pageSizeChange"
          :show-total="(total) => `共 ${total} 条`"
        />
      </a-col>
    </a-row>
  </div>
</template>
<script>
import moment from "moment";
const columns = [
  {
    title: "序号",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "档案名称",
    dataIndex: "archiveName",
    key: "archiveName",
  },
  {
    title: "纸质状态",
    dataIndex: "paperStatus",
    key: "paperStatus",
  },
  {
    title: "借阅人",
    dataIndex: "operator",
    key: "operator",
  },
  {
    title: "建档时间",
    dataIndex: "creationTime",
    key: "creationTime",
  },
  {
    title: "借阅时间",
    dataIndex: "borrowtime",
    key: "borrowtime",
  },
  {
    title: "借阅原因",
    dataIndex: "borrowReason",
    key: "borrowReason",
  },
  {
    title: "经办人",
    dataIndex: "borrower",
    key: "borrower",
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];
export default {
  mounted() {
    this.getList();
  },
  data() {
    return {
      dateRange: [],
      button: [],
      data: [],
      columns,
      vis: false,
      vis1: false,
      pageSizeOptions: ["10", "20", "50"],
      total: 0,
      query: {
        current: 1,
        pageSize: 20,
        archiveName: "",
        borrower: "",
        startTime: "",
        endTime: "",
        borrowReason: "",
        operator: "",
      },
      newData: {
        archiveName: "",
        archiveForm: "",
        archiveCount: "",
        archiveLevel: "",
        archiveUrl: "",
        entryOperator: "",
        entryTime: "",
        paperStatus: "",
        paperStorageCode: "",
      },
      oldData: {},
      file: null,
    };
  },

  methods: {
    moment,
    handleReturn(record) {
       this.$axios
        .get(
          "government-platform-center/archiveManagement/backDoc?id=" + record.id
        )
        .then((res) => {
          if (res.data.msg == "success") {
            this.$message.success("归还成功");
            this.getList();
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    getQuery() {
      this.query.offset = 1;
      var q = "government-platform-center/archiveManagementRecord";
      for (const prop in this.query) {
        if (this.query[prop] != "") {
          if (prop == "current") {
            q = q + "?offset=" + this.query[prop];
          } else if (prop == "pageSize") {
            q = q + "&current=" + this.query[prop];
          } else {
            q = q + "&" + prop + "=" + this.query[prop];
          }
        }
      }
      this.$axios.get(q).then((res) => {
        if (res.data.msg == "success") {
          this.data = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    cleanQuery() {
      this.query = {
        current: 1,
        pageSize: 20,
        archiveName: "",
        archiveForm: "",
        paperStorageCode: "",
        entryTime: "",
        archiveCount: "",
      };
      this.dateRange = [];
      this.getList();
    },
    getList() {
      var q = "government-platform-center/archiveManagementRecord";
      for (const prop in this.query) {
        if (this.query[prop] != "") {
          if (prop == "current") {
            q = q + "?offset=" + this.query[prop];
          } else if (prop == "pageSize") {
            q = q + "&current=" + this.query[prop];
          } else {
            q = q + "&" + prop + "=" + this.query[prop];
          }
        }
      }
      this.$axios.get(q).then((res) => {
        if (res.data.msg == "success") {
          this.data = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    pageChange(current) {
      this.query.current = current;
      this.getList();
    },
    pageSizeChange(current, pageSize) {
      this.query.pageSize = pageSize;
      this.query.current = current;
      this.getList();
    },
    addData() {
      this.vis = true;
    },
    handleOk() {
      var a = 0;
      for (const prop in this.newData) {
        if (this.newData[prop] == "") {
          a++;
        }
      }
      if (a == 0) {
        var parmas = this.newData;
        this.$axios
          .post("/government-platform-center/archiveManagement", parmas, {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          })
          .then((res) => {
            if (res.data.msg == "success") {
              this.getList();
              this.vis = false;
              this.newData = {
                archiveName: "",
                archiveForm: "",
                archiveCount: "",
                archiveLevel: "",
                archiveUrl: "",
                entryOperator: "",
                entryTime: "",
                paperStatus: "",
                paperStorageCode: "",
              };
            }
          });
      } else {
        this.$message.error("请完善所有必填项");
      }
    },
    createTime(date, dateString) {
      this.newData.entryTime = dateString;
    },
    createTime1(val) {
      this.query.startTime = val[0];
      this.query.endTime = val[1];
    },
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    downloadData(record) {
      this.$axios
        .get(
          "government-platform-center/archiveManagement/getDoc?id=" + record.id
        )
        .then((res) => {
          if (res.data.msg == "success") {
            this.$message.success("借阅成功");
            window.open(res.data.data);
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    lookData(record) {
      this.vis1 = true;
      this.oldData = record;
    },
  },
};
</script>
<style scoped>
.ant-row {
  border-radius: 5px;
  margin-bottom: 15px;
  background: #fff;
  padding: 20px;
  color: #000;
}

/deep/.ant-table-thead > tr > th {
  color: #000;
  font-weight: bold;
}

/deep/.ant-table-tbody > tr > td {
  color: #000;
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

.file-upload-btn {
  background-color: #007bff;
  /* 背景颜色 */
  color: white;
  /* 文本颜色 */
  border: none;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
}
</style>
